<template>
  <div class="table-plus">
    <div class="container">
      <el-table
        :data="tableDataArray"
        border
        style="width: 100%"
        :span-method="arraySpanMethod"
      >
        <el-table-column
          v-for="(item, index) in xLabel"
          align="center"
          :prop="item.prop"
          :label="item.label"
          :key="index"
        >
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    tableDataArray() {
      let arr = [];
      this.yLabel.forEach((y, yIndex) => {
        let list = [];
        for (let i = 1; i < 5; i++) {
          list[i - 1] = this.option.find((item) => {
            return item.x === yIndex + 1 && item.y === i;
          });
        }
        arr.push({
          name: y,
          left: this.tableDataObj[list[0] && list[0].prop],
          right: this.tableDataObj[list[1] && list[1].prop],
          refer: this.tableDataObj[list[2] && list[2].prop],
          offset: this.tableDataObj[list[3] && list[3].prop],
        });
      });
      return arr;
    },
  },
  props: ["option", "tableDataObj"],
  data() {
    return {
      xLabel: [
        { label: "项目", prop: "name", xIndex: 0 },
        { label: "左足", prop: "left", xIndex: 1 },
        { label: "右足", prop: "right", xIndex: 2 },
        { label: "参考值", prop: "refer", xIndex: 3 },
        { label: "偏差", prop: "offset", xIndex: 4 },
      ],
      yLabel: [
        "站立时间（毫秒）",
        "摆动时间",
        "步长（米）",
        "步长时间",
        "足偏角（度）",
        "步频（步/分钟）",
        "步幅（米）",
        "步幅时间",
        "步速（米/秒）",
        "步宽（米）",
        "左右均匀度",
      ],
    };
  },

  created() {},

  methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex > 4) {
        if (columnIndex === 1) {
          return [1, 2];
        }
        if (columnIndex === 2) {
          return [0, 0];
        }
      }
    },
  },
};
</script>

<style scoped lang='less'>
.table-plus {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: #efefef;
  display: flex;
  justify-content: center;
  align-items: center;
  .container {
    width: 800px;
  }
}
</style>
